<template>
	<view>
		<view>
			<u-navbar title="订单记录"></u-navbar>
		</view>
		<view class="blank"></view>
		<view class="allItem">
			<view class="OneOrder" v-for="(item,index) in listOrder" @click="navToOrder(item.orderId)">
				
				<view class="top">
					<view class="nameOfShop">{{item.shopName}}></view>
					<view class="statusComplete" v-if="item.status===1">已完成</view>
					<view class="statusNoComplete" v-else>进行中</view>
				</view>
				<u-divider></u-divider>
				<view class="buttom">
					<u-avatar size="70" shape="square" :src="item.avatorShop"></u-avatar>
					<view class="detailInformation">
						<view class="dataTime">下单时间：{{item.orderTime}}</view>
						<view class="Money_order">总价：￥{{item.orderPrice}}</view>
					</view>
				</view>
<!-- 				<view class="blank"></view> -->
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openid:'',
				// 0表示进行中的订单
				listOrder:[
				{
					orderId:'aaaa',
					status:0,
					shopName:'TFC炸鸡',
					avatorShop:'../../static/img/cart/mpdf.png',
					orderPrice:230,
					orderTime:'2022-07-06 23:42:26'	
				}
				]
			}
		},
		methods: {
			navToOrder(orderId){
				uni.navigateTo({
					url:"../order/order?orderId="+orderId
				})
			}
		},
		onShow() {
			var _this = this
			this.openid = uni.getStorageSync("openid")
			console.log("onshowMethod")
			uni.request({
				url:_this.$store.state.IP+"order/"+_this.openid,
				
				success(res) {
					console.log(res.data.msg);
					_this.listOrder = res.data.msg

				}
				
			})
		}
	}
</script>

<style lang="scss">
	.blank{
		height: 80rpx;
	}
	.allItem{
		
		.OneOrder{
			
			
			background-color: #FFFFFF;
			height: 300rpx;
			margin-left: 5%;
			margin-right: 5%;
			margin-top: 40rpx;
			.top{
				display: flex;
				flex-direction: row;
				
				.nameOfShop{
					margin-left: 20rpx;
					margin-top: 20rpx;
					width: 70%;
					font-weight: bold;
					font-size: 40rpx;
					
				}
				.statusComplete{
					margin-right: 10%;
					margin-top: 20rpx;
					font-weight: lighter;
					color:#778899;
				}
				.statusNoComplete{
					margin-right: 10%;
					margin-top: 20rpx;
					font-weight: lighter;
					color:#48D1CC;
				}
			}
			.buttom{
				display: flex;
				flex-direction: row;
				font-size: 38rpx;
				margin-left: 20rpx;
				.dataTime{
					margin-left: 10%;
					width: 100%;
					font-size: 38rpx;
				}
				.Money_order{
					margin-left: 10%;
					margin-top: 5%;
					width: 100%;
					font-size: 32rpx;
				}
			}
		}
	}
	page{
	    background: #EFEFEF;
	}
	
</style>
